<template>
  <el-main>
    <div class="caseContainer">
      <el-image
        src="http://file.chat.navrise.com/file/demo/caseBanner.png"
        fit="cover"
        style="height: 33.33rem"
      ></el-image>
      <div class="caseContent">
        <div class="events_title">
          <div class="titleB">
            <b></b>
            <span></span>
          </div>
          <h2>优质客户</h2>
          <div class="titleB">
            <span></span>
            <b></b>
          </div>
        </div>
        <div class="caseDiv" style="margin-bottom: 3.6rem">
          <div v-for="item in dataLogo" class="everyLogo">
            <el-image :src="item"></el-image>
          </div>
        </div>
        <div class="events_title">
          <div class="titleB">
            <b></b>
            <span></span>
          </div>
          <h2>优秀案例</h2>
          <div class="titleB">
            <span></span>
            <b></b>
          </div>
        </div>
        <div class="caseDiv">
          <div v-for="(item,index) in data" class="everyBlock">
            <el-image
              :src="item.img"
              fit="cover"
            ></el-image>
            <h4>{{item.title}}</h4>
            <div class="everyText">
              <div class="spanP">
              <span :class="index === 0?colorSpanOne:index === 1?colorSpanThree:
              index === 2?colorSpanFifth:index === 3?colorSpanSix:index === 4?colorSpanSeven:colorSpanSix">{{item.spanOne}}</span>
                <span :class="index === 1?colorSpanFour:index === 5?colorSpanEight:colorSpanTwo">{{item.spanTwo}}</span>
              </div>
              <div class="spanN">阅读量：{{item.number}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <foot-view></foot-view>
  </el-main>
</template>

<script>
  // import caseBannerUrl from '@/assets/img/case/caseBanner.png'
  import caseImageUrl1 from '@/assets/img/case/2.png'
  import caseImageUrl2 from '@/assets/img/case/3.png'
  import caseImageUrl3 from '@/assets/img/case/4.png'
  import caseImageUrl4 from '@/assets/img/case/5.png'
  import caseImageUrl5 from '@/assets/img/case/6.png'
  import caseImageUrl6 from '@/assets/img/case/7.png'
  import caseLogoUrl1 from '@/assets/img/case/logo-1.png'
  import caseLogoUrl2 from '@/assets/img/case/logo-2.png'
  import caseLogoUrl3 from '@/assets/img/case/logo-3.png'
  import caseLogoUrl4 from '@/assets/img/case/logo-4.png'
  import caseLogoUrl5 from '@/assets/img/case/logo-5.png'
  import caseLogoUrl6 from '@/assets/img/case/logo-6.png'
  import caseLogoUrl7 from '@/assets/img/case/logo-7.png'
  import caseLogoUrl8 from '@/assets/img/case/logo-8.png'
  import caseLogoUrl9 from '@/assets/img/case/logo-9.png'
  import caseLogoUrl10 from '@/assets/img/case/logo-10.png'
  import caseLogoUrl11 from '@/assets/img/case/logo-11.png'
  import caseLogoUrl12 from '@/assets/img/case/logo-12.png'
  import caseLogoUrl13 from '@/assets/img/case/logo-13.png'
  import caseLogoUrl14 from '@/assets/img/case/logo-14.png'
  import caseLogoUrl15 from '@/assets/img/case/logo-15.png'
  import caseLogoUrl16 from '@/assets/img/case/logo-16.png'
  import caseLogoUrl17 from '@/assets/img/case/logo-17.png'
  import caseLogoUrl18 from '@/assets/img/case/logo-18.png'
  import caseLogoUrl19 from '@/assets/img/case/logo-19.png'
  import caseLogoUrl20 from '@/assets/img/case/logo-20.png'
  import caseLogoUrl21 from '@/assets/img/case/logo-21.png'
  import caseLogoUrl22 from '@/assets/img/case/logo-22.png'
  import caseLogoUrl23 from '@/assets/img/case/logo-23.png'
  import caseLogoUrl24 from '@/assets/img/case/logo-24.png'
  import caseLogoUrl25 from '@/assets/img/case/logo-25.png'
  import caseLogoUrl26 from '@/assets/img/case/logo-26.png'
  import caseLogoUrl27 from '@/assets/img/case/logo-27.png'
  import caseLogoUrl28 from '@/assets/img/case/logo-28.png'
  import caseLogoUrl29 from '@/assets/img/case/logo-29.png'
  import caseLogoUrl30 from '@/assets/img/case/logo-30.png'
  export default {
    name: "Case",
    data(){
      return{
        // caseBannerUrl:caseBannerUrl,
        colorSpanOne:'colorSpanOne',
        colorSpanTwo:'colorSpanTwo',
        colorSpanThree:'colorSpanThree',
        colorSpanFour:'colorSpanFour',
        colorSpanFifth:'colorSpanFifth',
        colorSpanSix:'colorSpanSix',
        colorSpanSeven:'colorSpanSeven',
        colorSpanEight:'colorSpanEight',
        dataLogo:[caseLogoUrl1,caseLogoUrl2,caseLogoUrl3,caseLogoUrl4,caseLogoUrl5,caseLogoUrl6,caseLogoUrl7,caseLogoUrl8,
          caseLogoUrl9,caseLogoUrl10,caseLogoUrl11,caseLogoUrl12,caseLogoUrl13,caseLogoUrl14,caseLogoUrl15,caseLogoUrl16,caseLogoUrl17,
          caseLogoUrl18,caseLogoUrl19,caseLogoUrl20,caseLogoUrl21,caseLogoUrl22,caseLogoUrl23,caseLogoUrl24,caseLogoUrl25,caseLogoUrl26,
          caseLogoUrl27,caseLogoUrl28,caseLogoUrl29,caseLogoUrl30],
        data:[
          {
            img:caseImageUrl1,
            title:'夏日里杭州街头无人看管的菜鸟爱心冰箱',
            spanOne:'互联网',
            spanTwo:'高热度',
            number:'300w+'
          },
          {
            img:caseImageUrl2,
            title:'in77奇遇节-in77 x OT x h.linx .噪声电音节',
            spanOne:'购物商超',
            spanTwo:'潮流',
            number:'10w+'
          },
          {
            img:caseImageUrl3,
            title:'超人气蹦床乐园—G-Jump运动空间杭州滨江',
            spanOne:'休闲出行',
            spanTwo:'超值福利',
            number:'10w+'
          },
          {
            img:caseImageUrl4,
            title:'KFC-敢爱敢怼DE酷黑天使黄子韬带你吃鸡！',
            spanOne:'超大牌',
            spanTwo:'美食诱惑',
            number:'6.4w+'
          },
          {
            img:caseImageUrl5,
            title:'星巴克—2020跨年带上星巴克「新盆友」',
            spanOne:'甜品茶饮',
            spanTwo:'超值福利',
            number:'5.2w+'
          },
          {
            img:caseImageUrl6,
            title:'所有女生，赫莲娜来咯！承包一年的护肤品!',
            spanOne:'超大牌',
            spanTwo:'美容美妆',
            number:'6.4w+'
          }
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
.el-main{
  width: 100%;
  background-color: #f4f4f4;
  padding: 0;
  min-width: 120rem;
  .caseContainer{
    width: 100rem;
    background-color: #ffffff;
    margin: 2rem auto 0;
    .caseContent{
      width: 100%;
      padding: 5rem 5.8rem 0;
      background-color: #ffffff;
      box-sizing: border-box;
      .events_title{
        margin: 0 auto 3.33rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .titleB{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          b{
            background: #333;
            /*margin-top: .5rem;*/
            display: inline-block;
            width: 8.3rem;
            height: 2px;
            vertical-align: middle;
          }
          span{
            width: .42rem;
            height: .42rem;
            /*margin-top: .5rem;*/
            border-radius: 100%;
            background-color: #333333;
            display: inline-block;
          }
        }

        h2{
          vertical-align: middle;
          font-size: 2.66rem;
          color: #333;
          padding: 0 2.66rem;
          font-weight: 400;
          margin: 0;
        }
      }
      .caseDiv{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .everyLogo{
          width: 16.66rem;
          height: 5rem;
          background-color: #ffffff;
          border: solid 1px #dddddd;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 1.25rem;
        }
        .everyBlock{
          width: 41.66rem;
          height: 31.66rem;
          padding: 2.9166rem 2.9166rem 2.66rem;
          margin-bottom: 5rem;
          border:1px solid #dddddd;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          box-sizing: border-box;
          .el-image{
            width: 35.833rem;
            height: 18.33rem;
          }
          h4{
            /*font-family: 'fontMedium';*/
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 2rem;
            color: #555555;
            margin: 2.5rem 0 2.0833rem;
            text-align: left;
          }
          .everyText{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .spanP{
              span{
                height: 1.66rem;
                border-radius: 0.833rem;
                font-size: 1.16rem;
                font-weight: 400;
                line-height: 1.8rem;
                display: inline-block;
                padding: 0 .7rem;
              }
              // 物联网
              .colorSpanOne{
                border: 1px solid #31578f;
                color: #404787;
              }
              // 高热度  超值福利 美食诱惑
              .colorSpanTwo{
                border: 1px solid #ff6000;
                color: #ff6000;
              }
              // 购物商场
              .colorSpanThree{
                border: 1px solid #147800;
                color: #147800;
              }
              // 潮流
              .colorSpanFour{
                border: 1px solid #ffb400;
                color: #ffb400;
              }
              // 休闲出行
              .colorSpanFifth{
                border: 1px solid #0099b0;
                color: #0099b0;
              }
              // 超打牌
              .colorSpanSix{
                border: 1px solid #d800ff;
                color: #d800ff;
              }
              // 甜品茶饮
              .colorSpanSeven{
                border: 1px solid #ff00c0;
                color: #ff00c0;
              }
              // 美容美妆
              .colorSpanEight{
                border: 1px solid #30b51a;
                color: #30b51a;
              }
              span+span{
                margin-left: 0.833rem;
              }
            }
            .spanN{
              /*font-family: 'fontMedium';*/
              font-size: 1.5rem;
              font-weight: 500;
              line-height: 2rem;
              color: #555555;
              display: inline-block;
            }
          }
        }
      }

    }
  }
}
</style>
